<template>
  <div>
    <div>
      <van-nav-bar
          title="提现"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <div class="statedetail">
      <span class="moneydetail">+{{this.withdrawMsg.money}}￥</span>
      <span class="state">{{ this.withdrawMsg.status==1?'处理中':(this.withdrawMsg.status==2?'提现成功':'提现失败') }}</span>
    </div>
    <hr color="#f3f3f3"/>
    <div class="statemessage">
      <van-cell style="text-align: left" title="提现说明" value="余额提现" />
<!--      <van-cell style="text-align: left" title="手续费" value="0.00" />-->
      <van-cell style="text-align: left" title="充值进度">
        <div class="step">
          <van-steps direction="vertical" active="1">
            <van-step v-for="(item,index) in options" :key="index" style="height: 60px">
              <template v-slot:inactive-icon>
                <van-icon :name="item.icon" :class="item.classActive"/>
              </template>
              <template v-slot:active-icon>
                <van-icon :name="item.icon" :class="item.classActive"/>
              </template>
              <h3 style="color: #7d7d7d;font-size: 12px;text-align: left;margin-left: 25px">{{item.text}}</h3>
              <p style="color: #7d7d7d;font-size: 12px">2020-01-01 12:00:00</p>
            </van-step>
          </van-steps>
        </div>
      </van-cell>
      <van-cell style="text-align: left" title="提现到" :value="withdrawMsg.toBank" />
      <van-cell style="text-align: left" title="交易时间" :value="withdrawMsg.overTime|formatTimer" />
<!--      <van-cell style="text-align: left" title="交易单号" value="11111111111111111111" />-->
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return {
      withdrawMsg:{},
      options:[]
    }
  },
  mounted() {
    let id = this.$route.query.id;
    this.getWithdarwDetailbyId(id)
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: '/withdrawrecord'
      })
    },
    // 根据id查询提现记录
    getWithdarwDetailbyId(id){
      axios.get('http://localhost:11219/mine/withdraw/getwithdrawdetailbyid/'+id).then(res=>{
        this.withdrawMsg=res.data
        console.log(this.withdrawMsg)
        if(this.withdrawMsg.status==1){
          this.options.push({
              text:"处理中",
              icon:'checked',
              classActive:"successClass"
          })
        }else if(this.withdrawMsg.status==2){
          this.options.push({
            text:"处理中",
            icon:'checked',
            classActive:"successClass"
          })
          this.options.push({
              text:"提现成功",
              icon:'checked',
              classActive:"successClass"
          })
        }else{
          this.options.push({
            text:"处理中",
            icon:'checked',
            classActive:"successClass"
          })
          this.options.push({
              text:"提现失败",
              icon:'close',
              classActive:"errorClass"
          })
        }
      })
    }
  },
  filters: {
    formatTimer: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    },
  }
}
</script>

<style scoped>
.statedetail{
  width: 100%;
  height: 180px;
  background-color: #ffffff;
}
.statedetail .moneydetail{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 50px;
  font-size: 40px;

}
.statedetail .state{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 120px;
  color: #9ca1a7;
}
.statemessage{
  width: 100%;
  height: 100%;
  background-color: white;
}
.step{
  width: 100%;
  height: 150px;
  float: right;
}
.successClass {
  color: #07c160;
  font-size: 20px;
}
.errorClass {
  color: #ee0a24;
  font-size: 20px;
}
.warningClass {
  color: #e6a23c;
  font-size: 20px;
}
</style>
